﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis Home</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" />  
        <link rel="stylesheet" href="css/red.css" />
        <link rel="stylesheet" href="css/prettyPhoto.css" media="screen" />

        <!-- revolution slider settings -->
        <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="rs-plugin/css/revolution.css" media="screen" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->

        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->

        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
        <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default active"><a href="#">Default</a></li>
                        <li class="metropolis-clean"><a href="../metropolis-clean/index.html">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/index.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
		<% include header.html %>
        <!-- 3header-wrapper end -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .rs-wrapper start -->
        <div class="rs-wrapper">

            <div class="fullwidthbanner-container">

                <div class="fullwidthbanner">
                    <ul>

                        <li data-transition="slotzoom-horizontal" data-slotamount="15">
                            <img src="img/slider/slide11.jpg" alt="background">
                            <div class="caption lfl regular_title"  data-x="335" data-y="90" data-speed="700" data-start="2000" data-easing="easeOutBack">Clean & Professional!</div>
                            <div class="caption lfr regular_subtitle"  data-x="390" data-y="160" data-speed="700" data-start="2400" data-easing="easeOutBack">Clean and Professional Design</div> 
                            <div class="caption lfr regular_subtitle"  data-x="390" data-y="202" data-speed="700" data-start="2900" data-easing="easeOutBack">Fully Responsive Layout</div>
                            <div class="caption lfr regular_subtitle"  data-x="390" data-y="242" data-speed="700" data-start="3200" data-easing="easeOutBack">Amazing Font Awesome Icons</div>
                        </li>

                        <li data-transition="3dcurtain-vertical" data-slotamount="10">
                            <img src="img/slider/slide12.jpg" alt="background">
                            <div class="caption lfl regular_title2"  data-x="460" data-y="90" data-speed="700" data-start="2000" data-easing="easeOutBack">Built For:</div>
                            <div class="caption lfr regular_subtitle"  data-x="508" data-y="160" data-speed="700" data-start="2400" data-easing="easeOutBack">Professional Business Sites</div> 
                            <div class="caption lfr regular_subtitle"  data-x="508" data-y="202" data-speed="700" data-start="2900" data-easing="easeOutBack">Creative Portfolio Layouts</div>
                            <div class="caption lfr regular_subtitle"  data-x="508" data-y="242" data-speed="700" data-start="3200" data-easing="easeOutBack">All Types of Small Business</div>
                        </li>

                        <li data-transition="3dcurtain-horizontal" data-slotamount="10">
                            <img src="img/slider/slide13.jpg" alt="background">
                            <div class="caption lfl regular_title3"  data-x="460" data-y="90" data-speed="700" data-start="2000" data-easing="easeOutBack">Creative Side of Metropolis</div>
                            <div class="caption lfr regular_subtitle"  data-x="508" data-y="160" data-speed="700" data-start="2400" data-easing="easeOutBack">Showcase Your Creative Work</div> 
                            <div class="caption lfr regular_subtitle"  data-x="508" data-y="202" data-speed="700" data-start="2900" data-easing="easeOutBack">Grab Attention from Your Clients</div>
                            <div class="caption lfr regular_subtitle"  data-x="508" data-y="242" data-speed="700" data-start="3200" data-easing="easeOutBack">Choose One of 5 Color Styles</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- .rs-wrapper end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">

            <!-- .container_12 start -->
            <div class="container_12">
                <!-- .grid_12 start -->
                <article class="grid_12">

                    <!-- .entry-note start -->
                    <section class="entry-note">
                        <h1>Welcome to <span class='text-color'>Metropolis</span>. Take a Second and Explore it.</h1>
                        <p>
                            We proudly present you Metropolis, very clean 
                            corporate theme which is perfect for company website. 
                            Metropolis comes with lot of options  regarding color 
                            styles and different layouts. 
                        </p>
                    </section><!-- entry-note end -->
                </article><!-- .grid_12 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <div class="service-box-2-container">
                        <div class="icon">
                            <i class="icon-desktop"></i>
                        </div>

                        <section class="service-box-2">
                            <div class="title">
                                <a href="services.html">
                                    <h3>Responsive Design</h3>
                                </a>
                                <span>Looks awesome on any mobile device</span>
                            </div>

                            <div class="description">
                                <p>
                                    Metropolis was built with mobile look and feel 
                                    in mind to provide you best user experience. 
                                    Simply try to resize your browser and you’ll 
                                    know what we mean.
                                </p>
                            </div>

                            <div class="read-more-btn">
                                <a href="#">Read more</a>
                                <span class="plus">+</span>
                            </div>

                        </section><!-- .service-box-2 end -->
                    </div>

                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <div class="service-box-2-container">
                        <div class="icon">
                            <i class="icon-cogs"></i>
                        </div>

                        <section class="service-box-2">
                            <div class="title">
                                <a href="services.html">
                                    <h3>Easy to Customize</h3>
                                </a>
                                <span>User friendly, clean code, easy to use</span>
                            </div>

                            <div class="description">
                                <p>
                                    Metropolis was built with mobile look and feel 
                                    in mind to provide you best user experience. 
                                    Simply try to resize your browser and you’ll 
                                    know what we mean.
                                </p>
                            </div>

                            <div class="read-more-btn">
                                <a href="#">Read more</a>
                                <span class="plus">+</span>
                            </div>

                        </section><!-- .service-box-2 end -->
                    </div>

                </article><!-- .grid_4 end -->

                <!-- .grid_4 start -->
                <article class="grid_4">
                    <div class="service-box-2-container">
                        <div class="icon">
                            <i class="icon-group"></i>
                        </div>

                        <section class="service-box-2">
                            <div class="title">
                                <a href="services.html">
                                    <h3>Excellent Support</h3>
                                </a>
                                <span>We provide support for all our items</span>
                            </div>

                            <div class="description">
                                <p>
                                    Metropolis was built with mobile look and feel 
                                    in mind to provide you best user experience. 
                                    Simply try to resize your browser and you’ll 
                                    know what we mean.
                                </p>
                            </div>

                            <div class="read-more-btn">
                                <a href="#">Read more</a>
                                <span class="plus">+</span>
                            </div>

                        </section><!-- .service-box-2 end -->
                    </div>
                </article><!-- .grid_4 end -->

                <div class="clearfix"></div>

                <!-- .grid_12 carousel-portfolio end -->
                <article class="grid_12 carousel-portfolio">

                    <section class="section-title center">
                        <div class="title-container">
                            <section class="title">
                                <h2>Our Portfolio</h2>
                                <span>Some really nice projects</span>
                            </section>
                        </div>
                    </section><!-- .section-title .center end -->

                    <ul id="foo2" class="carousel-li">
                        <li class="portfolio-style-2">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-1.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-1.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Photography</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-2.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-2.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-3.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-3.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Graphic Design</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-4.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-4.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Photography</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2"  data-alpha="webdesign">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-5.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-5.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-6.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-6.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-7.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-7.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Web Design</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->

                        <li class="portfolio-style-2"  data-alpha="graphicdesign">
                            <figure class="portfolio clearfix">
                                <div class="portfolio-image">
                                    <a href="portfolio-single.html">
                                        <img src="img/portfolio/thumb/portfolio-8.jpg" width="220" alt="portfolio">
                                    </a>

                                    <div class="portfolio-hover">
                                        <div class="mask"></div>
                                        <ul>
                                            <li class="portfolio-zoom">
                                                <a href="img/portfolio/1col/portfolio-8.jpg" 
                                                   data-gal="prettyPhoto[pp_gallery]">zoom
                                                </a>
                                            </li>

                                            <li class="portfolio-single">
                                                <a href="portfolio-single.html">single</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <figcaption>
                                    <a class="title">Portfolio Project Title</a>
                                    <span class="subtitle">Graphic Design</span>
                                </figcaption>
                            </figure>
                        </li><!-- portfolio-style-2 end -->
                    </ul><!-- .carousel-li end -->

                    <div class="clearfix"></div>

                    <div class="carousel-pagination" id="foo2_pag"></div>

                </article><!-- .grid_12 carousel-portfolio end -->

                <article class="grid_12 latest-blog-posts">
                    <!-- .section-title .center start -->
                    <section class="section-title center">

                        <!-- .ttile-container .carousel start -->
                        <div class="title-container">
                            <section class="title">
                                <h2>Latest News</h2>
                                <span>Our most interesting news</span>
                            </section>
                        </div><!-- .title-container .carousel end -->                        
                    </section><!-- .section-title .center end -->

                    <!-- .grid_6 start -->
                    <article class="grid_6 alpha">
                        <section class="post-info">
                            <img src="img/blog/small-1.jpg" alt="blog-image" />

                            <div class="comments">
                                <a href="blog-single.html">2 comments</a>
                            </div>
                        </section>

                        <section class="post-body">
                            <div class="post-meta">
                                <div class="category">
                                    <i class="icon-edit"></i>
                                </div>

                                <div class="title-date">
                                    <a href="blog-single.html">
                                        <h6>There are so many good reasons</h6>
                                    </a>
                                    <span class="date">april 22, 2013</span>
                                </div>
                            </div>

                            <p>
                                Typi non habent claritatem insitam; est usus 
                                legentis in iis qui facit eorum claritatem. 
                                Investigationes demonstraverunt lectores 
                                legere me lius...
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->

                    </article><!-- .grid_6 end -->

                    <!-- .grid_6 start -->
                    <article class="grid_6 omega">
                        <section class="post-info">
                            <img src="img/blog/small-2.jpg" alt="blog-image" />

                            <div class="comments">
                                <a href="blog-single.html">2 comments</a>
                            </div>
                        </section>

                        <section class="post-body">
                            <div class="post-meta">
                                <div class="category">
                                    <i class="icon-edit"></i>
                                </div>

                                <div class="title-date">
                                    <a href="blog-single.html">
                                        <h6>Why Choose Metropolis</h6>
                                    </a>

                                    <span class="date">april 22, 2013</span>
                                </div>
                            </div>

                            <p>
                                Typi non habent claritatem insitam; est usus 
                                legentis in iis qui facit eorum claritatem. 
                                Investigationes demonstraverunt lectores 
                                legere me lius...
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->

                    </article><!-- .grid_6 end -->

                    <div class="clearfix"></div>

                    <!-- .grid_6 start -->
                    <article class="grid_6 alpha">
                        <section class="post-info">
                            <img src="img/blog/small-3.jpg" alt="blog-image" />

                            <div class="comments">
                                <a href="blog-single.html">2 comments</a>
                            </div>
                        </section>

                        <section class="post-body">
                            <div class="post-meta">
                                <div class="category">
                                    <i class="icon-edit"></i>
                                </div>

                                <div class="title-date">
                                    <a href="blog-single.html">
                                        <h6>Clean an Professional Theme</h6>
                                    </a>

                                    <span class="date">april 22, 2013</span>
                                </div>
                            </div>

                            <p>
                                Typi non habent claritatem insitam; est usus 
                                legentis in iis qui facit eorum claritatem. 
                                Investigationes demonstraverunt lectores 
                                legere me lius...
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->

                    </article><!-- .grid_6 end -->

                    <!-- .grid_6 start -->
                    <article class="grid_6 omega">
                        <section class="post-info">
                            <img src="img/blog/small-4.jpg" alt="blog-image" />

                            <div class="comments">
                                <a href="blog-single.html">2 comments</a>
                            </div>
                        </section>

                        <section class="post-body">
                            <div class="post-meta">
                                <div class="category">
                                    <i class="icon-edit"></i>
                                </div>

                                <div class="title-date">
                                    <a href="blog-single.html">
                                        <h6>Ideal Choice for Your Business</h6>
                                    </a>

                                    <span class="date">april 22, 2013</span>
                                </div>
                            </div>

                            <p>
                                Typi non habent claritatem insitam; est usus 
                                legentis in iis qui facit eorum claritatem. 
                                Investigationes demonstraverunt lectores 
                                legere me lius...
                            </p>

                            <div class="read-more-btn">
                                <a href="blog-single.html">Read more</a>
                                <span class="plus">+</span>
                            </div>
                        </section><!-- .post-body end -->

                    </article><!-- .grid_6 end -->
                </article><!-- .grid_12 end -->

                <!-- .grid_8 start -->
                <article class="grid_8">
                    <!-- .section-title .center start -->
                    <section class="section-title center">

                        <!-- .ttile-container .carousel start -->
                        <div class="title-container">
                            <section class="title">
                                <h2>Why Choose Us</h2>
                                <span>So many good reasons</span>
                            </section>
                        </div><!-- .title-container .carousel end -->                        
                    </section><!-- .section-title .center end -->

                    <!-- .tabs start -->
                    <ul class="grid_3 alpha tabs vertical">
                        <li class="active">
                            <a href="#tab1">
                                <i class="icon-desktop"></i>
                                Responsive design   
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab2">
                                <i class="icon-group"></i>
                                Excellent Support
                            </a>
                        </li>
                        <li class="">
                            <a href="#tab3">
                                <i class="icon-leaf"></i>
                                Font Awesom Icons
                            </a>
                        </li>

                        <li class="">
                            <a href="#tab4">
                                <i class="icon-edit"></i>
                                Unlimited Color Options
                            </a>
                        </li>
                    </ul><!-- .tabs end -->

                    <!-- .tabs-content-wrap vertical start -->
                    <section class="grid_5 omega tab-content-wrap vertical">

                        <!-- #tab1 content start -->
                        <div id="tab1" class="tab-content">
                            <img src="img/about/responsive.png" class="float-left" alt="image">

                            <p>
                                Lorem ipsum dolor sit amet, cosectetuer adipiscing elit, 
                                sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad
                                minim veniam, quis nostrud exerci tation ullamcorper 
                                suscipit loboris nisl ut aliquip ex ea commodo.
                            </p>

                        </div><!-- #tab1 content end -->

                        <!-- tab2 content start -->
                        <div id="tab2" class="tab-content">
                            <img src="img/about/support.png" class="float-left" alt="image">
                            
                            <p>
                                Lorem ipsum dolor sit amet, cosectetuer adipiscing elit, 
                                sed diam nonummy nibh euismod tincidunt ut laoreet 
                                dolore magna aliquam erat volutpat. Ut wisi enim ad
                                minim veniam, quis nostrud exerci tation ullamcorper 
                                suscipit loboris nisl ut aliquip ex ea commodo.
                            </p>
                            
                        </div><!-- #tab2 content end -->

                        <!-- tab3 content start -->
                        <div id="tab3" class="tab-content">
                            <span class="text-dark text-big">Over 200 amazing icons
                            provided by Font Awesome! Use the ones you like the most.</span>
                            <br /><br />
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content 
                                of a page when looking at its layout. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget dolor.
                        </div><!-- #tab3 content end -->
                        
                        <!-- tab3 content start -->
                        <div id="tab4" class="tab-content">
                            <span class="text-dark text-big">Three amazing theme layouts with five
                                predefined color options.</span>
                            <br /><br />
                            <p>
                                Integer mollis elementum odio, eget 
                                consectetur arcu condi acm ent um sit amet.
                                Donec eui smod, justo quis vulputate 
                                varius, leo turpis pretium risus, et 
                                molestie mauris juo sit amet.
                                It is a long established fact that a reader
                                will be distracted by the readable content 
                                of a page when looking at its layout. 
                                Lorem ipsum dolor sit amet nec, consectetuer 
                                adipiscing elit. Aenean commodo ligula eget dolor.
                        </div><!-- #tab3 content end -->
                    </section><!-- .tabs-content-wrap .vertical end -->
                </article><!-- .grid_8 end -->
                
                <!-- .grid_4 start -->
                <article class="grid_4">
                     <!-- .section-title .center start -->
                    <section class="section-title center">

                        <!-- .ttile-container .carousel start -->
                        <div class="title-container">
                            <section class="title">
                                <h2>Our Clients</h2>
                                <span>What they say about us</span>
                            </section>
                        </div><!-- .title-container .carousel end -->                        
                    </section><!-- .section-title .center end -->
                    
                    <section class="testimonials-alternative">
                        <ul class="testimonials-alternative-nav">
                            <li><a href="#content-1" class="active"><img src="img/about/testimon-1.jpg" alt="testimonial 1" /></a></li>
                            <li><a href="#content-2"><img src="img/about/testimon-2.jpg" alt="testimonial 2" /></a></li>
                            <li><a href="#content-3"><img src="img/about/testimon-3.jpg" alt="testimonial 3" /></a></li>
                            <li><a href="#content-4"><img src="img/about/testimon-4.jpg" alt="testimonial 4" /></a></li>
                        </ul>

                        <section class="testimonials-alternative-content">
                            <div id="content-1" class="content active">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem investigationes.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                            <div id="content-2" class="content">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                            <div id="content-3" class="content">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                            <div id="content-4" class="content">
                                <p class="text">
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
                                    Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
                                </p>
                                <p class="author">- Mark Mathewson, info@business.com</p>
                            </div>
                        </section>
                    </section>           
                </article><!-- .grid_4 end -->

            </div><!-- .container_12 end -->

        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">

                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">

                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->  
        <script  src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto lightbox -->
        <script  src="js/portfolio.js"></script> <!-- portfolio custom options -->
        <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
        <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->
		<!-- to top -->
		<link rel="stylesheet" href="/lib/UItoTop/jquery.ui.totop.css" />
		<script src="/lib/UItoTop/jquery.ui.totop.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				/*
				var defaults = {
					containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
				};
				*/
				
				$().UItoTop({ easingType: 'easeOutQuart' });
				
			});
		</script>
        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
            
            // REVOLUTION SLIDER 
            jQuery(document).ready(function() {

                if (jQuery.fn.cssOriginal !== undefined)   // CHECK IF fn.css already extended
                    jQuery.fn.css = jQuery.fn.cssOriginal;

                jQuery('.fullwidthbanner').revolution(
                        {
                            delay: 5000,
                            startheight: 413,
                            startwidth: 940,
                            hideThumbs: 200,
                            thumbWidth: 100,
                            thumbHeight: 50,
                            thumbAmount: 5,
                            navigationType: "none",
                            navigationArrows: "verticalcentered",
                            navigationStyle: "round",
                            navigationHAlign: "right",
                            navigationVAlign: "top",
                            navigationHOffset: 0,
                            navigationVOffset: 20,
                            soloArrowLeftHalign: "left",
                            soloArrowLeftValign: "center",
                            soloArrowLeftHOffset: 20,
                            soloArrowLeftVOffset: 0,
                            soloArrowRightHalign: "right",
                            soloArrowRightValign: "center",
                            soloArrowRightHOffset: 20,
                            soloArrowRightVOffset: 0,
                            touchenabled: "on",
                            onHoverStop: "on",
                            navOffsetHorizontal: 0,
                            navOffsetVertical: 20,
                            hideCaptionAtLimit: 0,
                            hideAllCaptionAtLilmit: 0,
                            hideSliderAtLimit: 0,
                            stopAtSlide: -1,
                            stopAfterLoops: -1,
                            shadow: 0,
                            fullWidth: "on"

                        });
            });

            // PORTFOLIO CAROUSEL
            $("#foo2").carouFredSel({
                auto: false,
                scroll: 1,
                pagination: "#foo2_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 4
                }
            });

            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                width: 'variable',
                height: 'variable',
                items: {
                    width: 'auto',
                    visible: 1
                },
                swipe: {
                    ontouch: true,
                    onMouse: true
                }
            });
            
            // TESTIMONIALS ALTERNATIVE VERSION
            $('.testimonials-alternative-nav').on('click', 'a', function(e){
                e.preventDefault();
                var $current = $(this);               
                $('.testimonials-alternative-nav a').removeClass();
                $('.testimonials-alternative-content .content').hide();
                $current.addClass('active');
                var contentID = $current.attr('href');
                $('.testimonials-alternative-content').find(contentID).fadeIn();
            });

            /* ]]> */
        </script>
	
    </body>
</html>
